<script setup lang="ts">
import {getSeoRulesApi} from "@/apps/admin/api/system/seo";
import {useHttpPagingResult} from "@/hooks/http";
import {TableColumn} from "@/components/AppTable/TableType";
import {usePopupComponent} from "@/components/FunctionComponents";
import {defineAsyncComponent, h, ref} from "vue";


const {pagination, list, loading, getRequestData} = useHttpPagingResult(function (query) {
  return getSeoRulesApi({...query})
})

/**
 * 列配置
 */
const columns: Array<TableColumn> = [
  {prop: "id", label: "id", width: 100},
  {prop: "name", label: "页面名称", showOverflowTooltip: false, width: 190},
  {prop: "dynamic", label: "类型", width: 120},
  {prop: "title", label: "SEO标题规则", showOverflowTooltip: false, minWidth: 220},
  {prop: "keywords", label: "SEO关键词规则", showOverflowTooltip: false, minWidth: 320},
  {prop: "description", label: "描述规则", showOverflowTooltip: false, minWidth: 420},
  {prop: "updated_at", label: "上次更新", type: "timestramp", width: 175},
  {type: "action", label: "操作", width: 75, remove: false, fixed: "right"}
]

/**
 * 数据操作
 * @param action
 * @param seo
 */
function tableAction(action: string, seo: any) {
  if (action === 'update') {
    usePopupComponent(
        '编辑SEO规则',
        h(defineAsyncComponent(() => import("./components/UpdatedRules.vue")), {
          seo,
          onSuccess: () => getRequestData({page: pagination.page, size: pagination.size})
        }),
        '960px'
    )
  }
}

/**
 * 设置默认规则
 */
function openDefault() {
  usePopupComponent(
      '编辑默认SEO规则',
      h(defineAsyncComponent(() => import("./components/DefaultSeo.vue"))),
      '540px'
  )
}
</script>
<template>
  <data-card title="SEO规则配置">
    <template #right>
      <el-space>
        <el-button size="small" type="danger" @click="openDefault">
          默认规则
        </el-button>
        <el-button size="small" type="warning" @click="getRequestData({page:pagination.page,size:pagination.size})">
          刷新数据
        </el-button>
      </el-space>
    </template>

    <app-table height="calc(var(--ach) - 130px)" class="app-margin-top-interval" @action="tableAction" :data="list" :columns :loading="loading" :pagination @reload="getRequestData">
      <template #dynamic="{ row }">
        <el-link type="primary" v-if="row.dynamic">动态SEO</el-link>
        <el-link type="success" v-else>静态SEO</el-link>
      </template>
    </app-table>
  </data-card>
</template>